<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>树形菜单</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<!--ztree的导入-->
		<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
		<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />
		<script type="text/javascript">
			$(function() {
				//进行ztree树形菜单设置
				var setting={
					data:{
						simpleData:{
							enable:true	//支持简单json数据格式
						}
					},
					callback:{
						onClick:function(event,treeId,treeNode,clickFlag){
							var content="<div style='width:100%;height:100%; overflow: hidden;' >"
							+"<iframe scrolling='auto' style='width: 100%; height: 100%;border: 0px;' src="+treeNode.page+"></iframe>"
							+"</div>";
							if(treeNode.page != undefined && treeNode.page != ""){
								if($("#mytabs").tabs("exists",treeNode.name)){
									$("#mytabs").tabs("select",treeNode.name)
								}else{
									$("#mytabs").tabs('add',{
										title:treeNode.name,
										content:content,
										closable:true,
										selected:true
									})
								}
							}
						}
					}
				};
				//提供ztree树形菜单数据
				var zNodes=[
					{id:1,pId:0,name:"父节点1"},
					{id:11,pId:1,name:"父节点11"},
					{id:111,pId:11,name:"子节点111"},
					{id:112,pId:11,name:"子节点112"},
					{id:113,pId:11,name:"子节点113"},
					{id:12,pId:1,name:"父节点12"},
					{id:121,pId:12,name:"传智播客",page:"http://www.itcast.cn"},
					{id:122,pId:12,name:"百度",page:"http://www.baidu.com"},
					{id:2,pId:0,name:"父节点2"},
					{id:21,pId:2,name:"父节点21"},
					{id:211,pId:21,name:"子节点211"},
					{id:22,pId:2,name:"父节点22"},
					{id:221,pId:22,name:"子节点221"}
				];
				//生成树形菜单
				//$(document).ready(function(){
					$.fn.zTree.init($("#bassMenu"), setting, zNodes);
				//});
				
				//定义一个全局变量
				var currentRightTitle;
				//对选项卡注册右键
				$("#mytabs").tabs({
					onContextMenu:function(e,title,index){
						currtenRightTitle = title;
						//阻止默认菜单显示
						e.preventDefault();
						//显示隐藏菜单
						$("#mm").menu('show',{
							left:e.pageX,
							top:e.pageY
						});
					}
				});
				//对选项卡右键点击添加时间
				$("#mm").menu({
					onClick:function(item){
						if(item.name === "Close"){
							$("#tabs").tabs("close",currentRightTitle)
						}else if(item.name === "CloseOthers"){
							var tabs = $("#tabs").tabs("tabs");
							$(tabs).each(function(){
								if($(this).panel("options") != currentRightTitle){
									$("#tabs").tabs("close",$(this).panel("options").title)
								}
							});
						}else if (item.name === "CloseAll"){
							var tabs = $("#tabs").tabs("tabs");
							$(tabs).each(function(){
									$("#tabs").tabs("close",$(this).panel("options").title)
							});
						}
					}
				});
				
				/*$.messager.show({
					title:"帅哥来玩呀!",
					msg:"姑娘们接客啦!<a href='#'>请猛戳这里</a>",
					timeout:3000
				});*/
				/*$.messager.progress({
					interval:1000
				});
				window.setTimeout("$.messager.progress('close');",5000)*/
			});
			
		</script>
	</head>

	<body class="easyui-layout">
		<div data-options="region:'north',title:'非诚勿扰后台管理系统'" style="height: 100px;">
			<!--下拉菜单-->
			<a href="#" class="easyui-menubutton" data-options="iconCls:'icon-sava',menu:'#dd'">北部战区</a>
			<div id="dd" style="width: 50px;">
				<div>菜单一</div>
				<div>菜单一</div>
				<div>菜单一</div>
				<div class="menu-sep"></div>
				<div>菜单一</div>
			</div>
		</div>
		<div data-options="region:'west',title:'导航菜单'" style="width: 180px;">
			<div class="easyui-accordion" data-options="fit:'true'">
				<div data-options="title:'基础菜单'">
					<ul class="ztree" id="bassMenu"></ul>
				</div>
				<div data-options="title:'折叠面板二'">
					折叠面板二
				</div>
			</div>
		</div>
		<div data-options="region:'center'">
			<div id="mytabs" class="easyui-tabs" data-options="fit:'true'">
				<div data-options="title:'选项卡一',closable:'true'">选项卡一</div>
				<div data-options="title:'选项卡二'">选项卡二</div>
			</div>
		</div>
		<div data-options="region:'east'" style="width: 80px;">东部战区</div>
		<div data-options="region:'south'" style="height: 80px;">南部战区</div>
		
		<!--菜单,初始化隐藏-->
		<div id="mm" class="easyui-menu" style="width: 120px;">
			<div data-options="name:'Close'">关闭当前</div>
			<div data-options="name:'CloseOthers'">关闭其他</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-cancel',name:'CloseAll'">关闭所有</div>
		</div>
	</body>

</html>